<template>
  <div class="cross-level">
    <span>我是App组件</span>
    <button @click="change">修改数据</button>
    <SonA />
    <SonB />
  </div>
</template>

<script>
import SonA from './SonA.vue'
import SonB from './SonB.vue'

export default {
  components: { SonA, SonB },
  provide() {
    return {
      color: this.color,  // 简单类型(非响应式)
      userInfo: this.userInfo // 复杂类型(响应式) -> 推荐
    }
  },
  data() {
    return {
      color: 'pink',    
      userInfo: {
        name: 'tom',
        age: 25
      }
    }
  },
  methods: {
    change() {
      // this.color = 'gree'

      this.userInfo.name = 'lucy'
    }
  },
}
</script>

<style scoped>
.cross-level {
  border: 3px solid #000;
  border-radius: 6px;
  margin: 10px;
}
</style>